<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<title>雅戈尔门店</title>
<script type="text/javascript" src="./js/jquery.js"></script>
<link href="../public/H-ui/static/css/H-ui.css" rel="stylesheet"
	type="text/css"></link>
<link href="../public/H-ui/lib/Hui-iconfont/1.0.8/iconfont.css"
	rel="stylesheet" type="text/css"></link>
<!-- 百度地图api -->
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=I1iruTOiEMidZAWfs9QEzUbuKHLmeWAO"></script>
<!-- mobileselect -->
<link href="../public/mobileselect/css/mobileSelect.css"
	rel="stylesheet" type="text/css"></link>
<script type="text/javascript"
	src="../public/mobileselect/js/mobileSelect.js"></script>
</head>
<style type="text/css">
body {
	margin: 0px;
}

.img_celebrity_avatar {
	margin-top: 35px;
	margin-left: 5px;
	width: 40px;
	height: 40px;
	vertical-align: middle;
	float: left;
	width: 40px;
	width: 40px;
}

.div_celebrity_row {
	width: 98%;
	height: 120px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	padding-bottom: 10px;
	/* 	background: #eee; */
	border-bottom: 2px dashed #eee;
	/* box-shadow: 5px 5px 5px #888888; */
}

.div_celebrity_list {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 300px;
	overflow-y: scroll;
	margin-right: auto;
	/* 	padding: 4px; */
	/* 	border: 2px dashed #aaa; */
}

.ul_celebrity_info {
	margin: 0;
	padding: 0;
	border: 1px solid red;
	list-style: none;
}

.div_celebrity_info {
	float: left;
	width: 150px;
	margin-top: 25px;
	margin-left: 25px;
	border: 1px solid red;
}

.ct {
	color: #C0C0C0;
	margin-top: 6px;
	padding-left: 15px;
	text-align: left;
	padding-left: 15px;
}

.ct thead tr {
	font-weight: bold;
	color: black;
	font-weight: bold;
}

.ct thead tr th {
	padding-left: 10px;
}

.ct tbody tr:first-child {
	color: #0000FF;
}

.ct tbody tr:last-child {
	color: #0000FF;
}

#scrollView {
	width: 320px;
	height: 300px;
	/*上下边距是为了演示当滚动到顶部或底部时，继续滚动鼠标滚轮会滚动整个页面*/
	margin: 100px 0;
	display: flex;
}

#scrollContent {
	width: 300px;
	height: 300px;
	padding-left: 8px;
	background-color: antiquewhite;
	/*隐藏超出滚动内容区域的元素*/
	overflow: hidden;
}

#scrollTrack {
	width: 20px;
	height: 300px;
	background-color: cadetblue;
	display: flex;
	/*竖着排列滚动条区域内的上下按钮、滑块等元素*/
	flex-direction: column;
}

#btnUp, #btnDown {
	height: 20px;
	background-color: brown;
}

#scrollBar {
	height: 50px;
	background-color: darkblue;
}

#trackDown {
	/*让大幅度向下滚动点击区域占据排列完其他元素后剩下的所有区域*/
	flex-grow: 1;
}

/*当拖动滑块时，给body元素加上该类，防止鼠标的拖动导致网页内容的选择操作*/
.unselectable {
	/*当前版本的火狐（53）和Edge（15）不支持user-select标准属性，需要使用浏览器厂商前缀*/
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.headertab {
	background-color: #ccc;
	width: 100%;
	height: 45px;
	text-align: center;
	background-color: #ccc;
}

.headertab tr td:first-child {
	text-align: left;
	padding-left: 15px;
}
</style>

<body>
	<!-- 头部信息 -->
	<table class="headertab">
		<tr>
			<td style="width: 25%" id="seladdr"><i
				class="Hui-iconfont Hui-iconfont-arrow2-bottom"
				style="margin-right: 3px;"></i>浙江</td>
			<td style="width: 50%">杭州万象城</td>
			<td style="width: 25%"></td>
		</tr>
	</table>
	<!--百度地图容器-->
	<div
		style="width: 100%; height: 300px; border: #ccc solid 1px; font-size: 12px"
		id="map"></div>

	<div class="div_celebrity_list" id="ctlist">
		<div class='div_celebrity_row'>
			<div style=''>
				<img class='img_celebrity_avatar'
					src='http://pic62.nipic.com/file/20150329/2531170_103550104000_2.jpg' />
			</div>
			<table class="ct">
				<thead>
					<tr>
						<th></i>宁波中心店</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-phone"
							style="color: #ccc; margin-right: 3px;"></i> 0571-8975684</td>
					</tr>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-weizhi"
							style="color: #ccc; margin-right: 3px;"></i> 浙江省杭州市滨江新区富春路1812号</td>
					</tr>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-fabu"
							style="color: #ccc; margin-right: 3px;"></i> 到这里去</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class='div_celebrity_row'>
			<div style=''>
				<img class='img_celebrity_avatar'
					src='http://131225.vip602.cn/news/20151207/540228afc07f45b389ebdf01edc5c517.png' />
			</div>
			<table class="ct">
				<thead>
					<tr>
						<th></i>宁波中心店</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-phone"
							style="color: #ccc; margin-right: 3px;"></i> 0571-8975684</td>
					</tr>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-weizhi"
							style="color: #ccc; margin-right: 3px;"></i> 浙江省杭州市滨江新区富春路1812号</td>
					</tr>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-fabu"
							style="color: #ccc; margin-right: 3px;"></i> 到这里去</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class='div_celebrity_row'>
			<div style=''>
				<img class='img_celebrity_avatar'
					src='http://pic.58pic.com/10/81/55/53bOOOPIC43.jpg' />
			</div>
			<table class="ct">
				<thead>
					<tr>
						<th></i>宁波中心店</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-phone"
							style="color: #ccc; margin-right: 3px;"></i> 0571-8975684</td>
					</tr>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-weizhi"
							style="color: #ccc; margin-right: 3px;"></i> 浙江省杭州市滨江新区富春路1812号</td>
					</tr>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-fabu"
							style="color: #ccc; margin-right: 3px;"></i> 到这里去</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class='div_celebrity_row'>
			<div style=''>
				<img class='img_celebrity_avatar'
					src='http://img.zcool.cn/community/016cd3565d430232f8759647cebcd2.png' />
			</div>
			<table class="ct">
				<thead>
					<tr>
						<th></i>宁波中心店</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-phone"
							style="color: #ccc; margin-right: 3px;"></i> 0571-8975684</td>
					</tr>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-weizhi"
							style="color: #ccc; margin-right: 3px;"></i> 浙江省杭州市滨江新区富春路1812号</td>
					</tr>
					<tr>
						<td><i class="Hui-iconfont Hui-iconfont-fabu"
							style="color: #ccc; margin-right: 3px;"></i> 到这里去</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

</body>
<script type="text/javascript">
	var h = document.documentElement.clientHeight || document.body.clientHeight;
	console.log("高度" + h);
	$("#ctlist").height(h - 345);

	$("#seladdr").click(function() {
		console.log("选择地址")
	});

	function mapchange(v) {
		var markers;
		if (v == "a") {
			markers = [ {
				content : "地图",
				title : "雅戈尔",
				imageOffset : {
					width : 0,
					height : 3
				},
				position : {
					lat : 29.824442,
					lng : 121.520215
				}
			} ];
		} else {
			markers = [ {
				content : "鄞州公园",
				title : "美丽的鄞州公园",
				imageOffset : {
					width : 0,
					height : 3
				},
				position : {
					lat : 29.81736,
					lng : 121.552447,
				}
			} ];

		}

		createMap(markers[0].position.lat, markers[0].position.lng);//创建地图
		setMapEvent();//设置地图事件
		addMapControl();//向地图添加控件
		addMapOverlay(markers);//向地图添加覆盖物

	}

	$("#d").click(function() {
		window.open("/dt/wx/loc.html", "_blank");
	});

	$("#a").click(function() {

		mapchange("a")

	});
	$("#b").click(function() {
		mapchange("b")
	});

	//创建和初始化地图函数：
	function initMap() {
		createMap();//创建地图
		setMapEvent();//设置地图事件
		addMapControl();//向地图添加控件
		addMapOverlay();//向地图添加覆盖物
	}
	function createMap(lat, lng) {
		map = new BMap.Map("map");
		map.centerAndZoom(new BMap.Point(lng, lat), 16);
	}
	function setMapEvent() {
		map.enableScrollWheelZoom();
		map.enableKeyboard();
		map.enableDragging();
		map.enableDoubleClickZoom()
	}
	function addClickHandler(target, window) {
		target.addEventListener("click", function() {
			target.openInfoWindow(window);
		});
	}
	function addMapOverlay(markers) {

		for (var index = 0; index < markers.length; index++) {
			var point = new BMap.Point(markers[index].position.lng,
					markers[index].position.lat);
			var marker = new BMap.Marker(
					point,
					{
						icon : new BMap.Icon(
								"http://api.map.baidu.com/lbsapi/createmap/images/icon.png",
								new BMap.Size(20, 25), {
									imageOffset : new BMap.Size(
											markers[index].imageOffset.width,
											markers[index].imageOffset.height)
								})
					});
			var label = new BMap.Label(markers[index].title, {
				offset : new BMap.Size(25, 5)
			});
			var opts = {
				width : 200,
				title : markers[index].title,
				enableMessage : false
			};
			var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
			marker.setLabel(label);
			addClickHandler(marker, infoWindow);
			map.addOverlay(marker);
		}
		;
	}
	//向地图添加控件
	function addMapControl() {
		var scaleControl = new BMap.ScaleControl({
			anchor : BMAP_ANCHOR_TOP_LEFT
		});
		scaleControl.setUnit(BMAP_UNIT_METRIC);
		map.addControl(scaleControl);
		var navControl = new BMap.NavigationControl({
			anchor : BMAP_ANCHOR_TOP_LEFT,
			type : 1
		});
		map.addControl(navControl);
		var overviewControl = new BMap.OverviewMapControl({
			anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
			isOpen : false
		});
		map.addControl(overviewControl);
	}
	var map;
	mapchange("a");
	//	initMap();
</script>
</html>